/**
 * @description  : 表单内Section 行
 * @descriptionDetail : 表单内Section 行
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-11-04 19:12:26
 */
<template>
  <view class="section-content" :style="customStyle">
	<view class="left-lay">
		<slot name="leftIcon" :class="iconColorClass"></slot>
		<view :class="'left-icon '+iconColorClass" v-if="!$slots.leftIcon"></view>
		<text class="section-title">{{ title }}</text>
	</view>
	<u-icon @click="rightClick" v-if="rightIcon" class="right-icon-lay" :name="rightIcon" :custom-prefix="customPrefix" :color="rightIconColor" :size="rightIconSize"></u-icon>
  </view>
</template>

<script>
export default{
  name:"form-section",
  props:{
    title:{
      type: String,
      default:'',
    },
	iconColorClass:{
      type: String,
      default:'u-primary',
	},
	customStyle:{
	  type: Object,
	  default (){
		return {
		  "backgroundColor":"#ffffff",
	    };
	  }
	},
	rightIcon:{
	  type:String,
	  default:'',
	},
	customPrefix:{
	  type:String,
	  default:'uicon'
	},
	rightIconColor:{
	  type:String,
	  default: '#0079F2',
	},
	rightIconSize:{
	  type:Number,
	  default: 58,
	}
  },
  methods: {
	rightClick(){
	  this.$emit("rightTap");
	},
  },
}
</script>

<style lang="scss" scoped>
	.section-content{
		width: 100%;
		line-height: 32rpx;
		padding-top: 26rpx;
		padding-bottom: 26rpx;
		color: $u-main-color;
		font-size: 32rpx;
		position: relative;
		display: inline-flex;
		flex-direction: row;
		justify-content: flex-start;
		align-content: center;
	}
	.left-icon{
		width: 9rpx;
		height: 32rpx;		
		opacity: 1;
		border-radius: 5px;
	}
	.u-primary{
		background: $u-type-primary;
	}
	.u-warning{
		background: $u_type_warning;
	}
	.u-success{
		background: $u_type_success;
	}
	.section-title{
	  margin-left: 16rpx;
		font-weight: 600;
	}
	.left-lay{
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
		flex: 1;
	}
	.right-icon-lay{
		flex-shrink: 0;
	}
</style>
